<template>
    <div style="width: 1300px;height: 300px;">
    <div style="width: 100%;background-color: #0079fe;"><h2 style="color: aliceblue;">班级信息列表</h2></div>
    <div style="width: 100%;height: 30px;margin-bottom: 20px;">
        <div style="float: left;">班级号: <el-input v-model="clas" style="width: 100px" placeholder=""/></div>
        <div style="float: left;margin-left: 50px;">学院: 
        <el-select v-model="value" placeholder="请选择" style="width: 140px">
        <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        />
        </el-select>
       </div>
        <div style="float: left;margin-left: 50px;">年级: 
        <el-select v-model="value1" placeholder="请选择" style="width: 140px">
        <el-option
        v-for="item in options1"
        :key="item.grade"
        :label="item.grade"
        :value="item.grade"
        />
        </el-select>
        </div>
        <div><el-button plain style="float: left;margin-left: 50px;" @click="select()">查询</el-button></div>
        <div><el-button plain @click="reset()" style="float: left;margin-left: 50px;">重置</el-button></div>
        <div><el-button plain @click="centerDialogVisible = true">新增</el-button></div>
        
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="class.class_id" label="班级号" width="180"/>
    <el-table-column prop="name" label="学院" width="180" />
    <el-table-column prop="mahor.name" label="专业" width="180" />
    <el-table-column prop="class.grade" label="年级" width="180" />
    <el-table-column prop="class.student_count" label="班级人数" width="180" />
    <el-table-column prop="address" label="操作" >
       <!-- 插槽 -->
            <template #default="scope">
            <!-- 编辑 -->
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" text @click="update(scope.row)">
            {{ button.text }}
             </el-button>
             <!-- 删除 -->
            <el-button v-for="button in buttons":key="button.text":type="button.type" text @click="deletea(scope.row)"
            >
            {{ button.texte }}
            </el-button>   
            </template>
   

    </el-table-column>
    </el-table>
      <!-- 分页 -->
   <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px;"
    />
    </div>
   <!-- 添加表单 -->
   <el-dialog v-model="centerDialogVisible" title="添加班级信息" width="500" center>
    <span>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="classidadd" style="width: 240px" placeholder="输入班级" />
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <!-- <el-input v-model="majoradd" style="width: 240px" placeholder="输入专业" /> -->
        <el-select v-model="majoradd" placeholder="专业" style="width: 240px">
        <el-option
          v-for="item in optionsmajoradd"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          :disabled="item.disabled"
        />
        </el-select>
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="gradeadd" style="width: 240px" placeholder="输入年级" />
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="student_count" style="width: 240px" placeholder="输入人数" />
      </div>

    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
      <!-- 删除对话框 -->
    <el-dialog v-model="dialogVisible" title="系统提示" width="500" :before-close="handleClose">
        <span>你即将要删除->"{{ deletename }}"<-班级信息，删除后数据不可恢复，确定要执行吗?</span><br>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="danger" @click="qdsahnchu()">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 编辑 -->
   <el-dialog v-model="centerDialogVisibleupdate" title="添加班级信息" width="500" center>
    <span>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="classidupdate" style="width: 240px" placeholder="输入班级" />
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="majorupdate" style="width: 240px" placeholder="输入专业" />
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="gradeupdate" style="width: 240px" placeholder="输入年级" />
      </div>
      <div style="margin-bottom: 20px; margin-left: 100px;">
        <el-input v-model="student_update" style="width: 240px" placeholder="输入人数" />
      </div>

    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisibleupdate = false">取消</el-button>
        <el-button type="primary" @click="updatetj()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const centerDialogVisible = ref(false)
const centerDialogVisibleupdate = ref(false)
const dialogVisible=ref(false) 
// 编辑按钮
const buttons = [
  { type: '', text: '编辑' },
  { type: '', texte: '删除' },
] 
// 重置
function reset(){
  value.value=''
  clas.value=''
  value1.value=''
}
// 首页数据
const tableData = ref([])
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const total=ref(1)
// 学院下拉框
const value = ref('')
// 年级下拉框
const value1 = ref('')
const options = ref([])
const options1 = ref([])
// 班级号
const clas = ref('')
const message = ref('Hello, Vue 3!');
// 删除
const deletename = ref("")
const deleteid = ref("")
// 添加表单字段
const classidadd = ref('')
// const majoradd = ref('')
const optionsmajoradd = ref([])
const gradeadd = ref('')
const student_count = ref('')
const majoradd = ref('')
// 添加表单
const infoxg=ref({
      class_id: classidadd,
      major_id: majoradd,
      grade: gradeadd,
      student_count:student_count
})
// 修改表单字段
const classidupdate = ref('')
const majorupdate = ref('')
const gradeupdate = ref('')
const student_update = ref('')
const infoupdate=ref({
      class_id: classidupdate,
      major_id: majorupdate,
      grade: gradeupdate,
      student_count:student_update
})
// 编辑
const updateid = ref("")

// 编辑
function update(item) {
    centerDialogVisibleupdate.value = true
    console.log("编辑返现",item);
    classidupdate.value=item.class.class_id
    majorupdate.value=item.mahor.name
    gradeupdate.value=item.class.grade
    student_update.value=item.class.student_count
    updateid.value=item.class.class_id
}
function updatetj(){
   axios.put('http://127.0.0.1:8000/class/update/'+updateid.value+'/',infoupdate.value)
    .then(res => {
        console.log(res)
        getdata()
        centerDialogVisibleupdate.value = false
        alert("修改成功")
    })
    .catch(err => {
        console.error(err); 
    })
}
// 删除
function deletea(item) {
    dialogVisible.value = true
    console.log(item);
    deleteid.value = item.class.class_id
    deletename.value=item.class.class_id
}
function qdsahnchu(){
   axios.delete('http://127.0.0.1:8000/class/delete/' +deleteid.value)
        .then(res => {
            console.log(res)
            getdata()
            dialogVisible.value = false
        })
        .catch(err => {
            console.error(err);
        })
}
// 添加
function add(){
    axios.post('http://127.0.0.1:8000/class/add/',infoxg.value)
    .then(res => {
        console.log(res)
        getdata()
       centerDialogVisible.value=false
        alert("添加成功")
    })
    .catch(err => {
        console.error(err); 
    })
}
// 学院下拉菜单
function college() {
  axios.get('http://127.0.0.1:8000/class/college/')
    .then(res => {
      console.log(res)
      options.value = res.data.data
      optionsmajoradd.value= res.data.data
    })
    .catch(err => {
      console.error(err);
    })
}
// 班级下拉框
function grade() {
  axios.get('http://127.0.0.1:8000/class/grade')
    .then(res => {
      console.log(res)
      options1.value = res.data.data
    })
    .catch(err => {
      console.error(err);
    })
}
// 查询
function select(){
  getdata()
}
//分页
function handleSizeChange(size) {
    pageSize4.value = size
    // daishanchu.value=item
    getdata()
}
function handleCurrentChange(page) {
    currentPage4.value = page
    getdata()
}
// 显示页面数据
function getdata() {
  axios.get('http://127.0.0.1:8000/class/select/', {
    params: {
      college_id: value.value,     // 学院ID（对应后端college_id）
      class_id: clas.value,        // 班级号（对应模型class_id字段）
      grade: value1.value,         // 年级
      page: currentPage4.value,
      pagesize: pageSize4.value
    }
  })
  .then(res => {
    tableData.value = res.data.data; // 数据结构已与表格匹配
    console.log(tableData.value);
     total.value = res.data.total
  })
  .catch(err => {
    console.error(err);
  });
}
onMounted(() => {
    // Your code here
    getdata()
    college()
    grade()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>